<template>
  <div>
    <!-- 动态组件 -->
    <div class="btns">
      <el-button :class="{bg:btn == 1}" @click="handleSwitchComponent('outbound',1)">{{$t('m.home.outbound')}}</el-button>
      <el-button :class="{bg:btn == 2}" @click="handleSwitchComponent('inbound',2)">{{$t('m.home.inbound')}}</el-button>
      <!-- <el-button :class="{bg:btn == 3}" @click="handleSwitchComponent('purchase',3)">{{$t('m.home.purchase')}}</el-button> -->
    </div>
    <!-- 动态组件 -->
    <!-- <keep-alive> -->
      <component v-bind:is="currentTabComponent" @switchComponent="handleSwitchComponent"></component>
    <!-- </keep-alive> -->
  </div>
</template>
<script>
export default {
  name:'index',
  data(){
    return {
      currentTabComponent:'outbound',
      btn:1
    }
  },
  components:{
    outbound:()=>import('@/business/home/outbound'),
    inbound:()=>import('@/business/home/inbound')
    // purchase:()=>import('@/business/home/purchase')
  },
  methods:{
    handleSwitchComponent(componentName,btn){
      this.btn=btn
      this.currentTabComponent = componentName
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.btns {
  display: flex;
  .el-button {
    margin-left: 15px;
    width: 105px;
  }
  .bg{
    background-color: #409EFF;
    color: #FFF;
  }
}
</style>